import React from 'react';
import axios from 'axios'
import './HerosList.css'
import { useEffect } from 'react';
import { useState } from 'react';
import PubSub from 'pubsub-js'
import { Link, useNavigate } from 'react-router-dom';

function HerosList(props) {
    // 存储数据
    let [data, setData] = useState([]);

    let navigate = useNavigate();// 编程式导航




    // 模拟生命周期钩子函数 componentDidMount()
    useEffect(() => {
        // 订阅
        PubSub.subscribe("keyword", async (msg, value) => {
            let result = await axios.get(`http://api.xiaohigh.com/heros?name_like=${value}`)
            setData(result.data);
            // PubSub.unsubscribe("keyword")
        });

        // 请求数据
        async function main() {
            // 请求数据
            let result = await axios.get('http://api.xiaohigh.com/heros');
            setData(result.data);
        };
        main();

        // 取消订阅
        return () => { PubSub.unsubscribe("keyword") }
    }, [])

    return (
        <div className='heroslist'>
            <ul>
                {
                    data.map((item) => {
                        return (
                            // <Link key={item.id} to={`/heroscon/${item.id}`}>
                            //     <li>
                            //         <img src={`https://cdn.xiaohigh.com${item.image}`} alt="" />
                            //         <div>{item.name}</div>
                            //     </li>
                            // </Link>

                            // <Link key={item.id} to={`/heroscon?id=${item.id}&name=${item.name}`}>
                            //     <li>
                            //         <img src={`https://cdn.xiaohigh.com${item.image}`} alt="" />
                            //         <div>{item.name}</div>
                            //     </li>
                            // </Link>

                            // state传参
                            // <Link key={item.id} to='/heroscon' state={{ id: `${item.id}`, name: `${item.name}` }}>
                            //     <li>
                            //         <img src={`https://cdn.xiaohigh.com${item.image}`} alt="" />
                            //         <div>{item.name}</div>
                            //     </li>
                            // </Link>

                            <li key={item.id} onClick={() => {
                                // 编程式导航
                                console.log('编程式导航');
                                // 1、使用useParams()hook传参
                                // navigate(`/heroscon/${item.id}/${item.name}`);

                                // 2、使用useSearchParams()hook传参
                                navigate(`/heroscon?id=${item.id}`);
                                // console.log(`heroscon?${item.id}`);

                                // 3、使用state传参
                                navigate(`/heroscon`, {
                                    replace: true, // 
                                    state: {
                                        id: item.id,
                                        name: item.name
                                    }
                                })
                            }}>
                                <img src={`https://cdn.xiaohigh.com${item.image}`} alt="" />
                                <div>{item.name}</div>
                            </li>

                        )
                    })
                }
                {
                    data.length > 0 ? null : <li>暂无数据</li>
                }
            </ul>
        </div>
    );
}

export default HerosList;